<style>
  .page-open #searchInput {border: 2px solid #fff}
  #pageBody a[href^="#search/"] {
    border: 1px solid #808080;
    padding: 0 6px;
    border-radius: 10px;
    color: #808080;
  }
  #pageBody a[href^="#search/"]:hover {
    text-decoration: none;
    color: #145ccd;
    border-color: #145ccd;
  }
</style>
<article>
  <p>在搜索框中键入任意内容来检索内容。</p>
</article>
<section>
  <header><h3>操作要点</h3></header>
  <article>
    <ul>
      <li>多个关键字使用空格分隔，例如 <a href="#search/button group">button group</a>；</li>
      <li>使用方向键（上下左右键）在检索结果中切换选中；</li>
      <li>按 Enter 键打开选中的结果；</li>
      <li>按 Esc 键清除键入的关键字；</li>
      <li>按 Tab 键使搜索框聚焦并准备好键入搜索文本；</li>
      <li>可以使用汉语拼音或汉语拼音简写来搜索，例如要查找富文本编辑器，以下关键字都可以找到：<a href="#search/bianjiqi">bianjiqi</a> 或 <a href="#search/bjq">bjq</a>。</li>
    </ul>
  </article>
</section>

<section>
  <header><h3>查找图标</h3></header>
  <article>
    <p>你甚至可以在搜索框查找图标字体的用法！直接键入 <a href="#search/icon-">icon-</a>，或者键入完整的图标名称。以下用法均可以用来检索图标：</p>
    <ul>
      <li>使用关键字前缀 <a href="#search/icon:">icon:</a>，<a href="#search/icon-">icon-</a> 或 <a href="#search/i:">i:</a>， 查看所有图标；</li>
      <li><a href="#search/icon-star">icon-star</a>，查找特定名称的图标；</li>
      <li><a href="#search/icon:star empty">icon:star empty</a>，使用多个关键字检索图标；</li>
      <li><a href="#search/icon:\e606">icon:\e606</a>，查找 Unicode 值为 <code>\e606</code> 的图标。</li>
    </ul>
  </article>
</section>
